<template>
  <div style="width: 100%; height: 100%" class="test">
    <dv-marquee style="width: 400px; height: 100px; border:1px solid red"
    :data="list" 
    direction="left"
    :wait-time="2000"
    :speed="1"
    :scroll-length="100"
    >
      <template v-slot:title>
       <div style="height: 100%; background: red; padding: 0 5px">标题</div> 
      </template>
      <div v-for="(item, index) in list" :key="item.title" 
      style="display: inline-block;
       margin: 10px; height: 80px; width: 80px; line-height: 80px; border: 1px solid; text-align: center">
        <!-- <span class="title">{{item.title}}</span> -->
        <span class="date" :title="item.date">{{index}}</span>
      </div>
    </dv-marquee>

    <dv-marquee style="width: 400px; height: 100px; border:1px solid red"
    :data="list2" 
    direction="right"
    
    >
      <template v-slot:title>
       <div style="height: 100%; background: red; padding: 0 5px">标题</div> 
      </template>
      <div v-for="(item, index) in list" :key="item.title" 
      style="display: inline-block;
       margin: 10px; height: 80px; width: 80px; line-height: 80px; border: 1px solid; text-align: center">
        <!-- <span class="title">{{item.title}}</span> -->
        <span class="date" :title="item.date">{{index}}</span>
      </div>
    </dv-marquee>
  </div> 
    
</template>
<script setup lang="ts" >
  import { ref } from 'vue';
  import { DvMarquee } from '$comp/index';

  const listInit = () => {
    const list = [] as any
    for(let i=0; i<6; i++){
      list.push({
        title: `无缝滚动第${i}行无缝滚动第${i}行`,
        date: '2017-12-16'
      })
    }
    return list
  }
  const list = ref(listInit())
  const list2 = ref(listInit())
</script>
<style lang="scss" scoped>
.test{
  box-sizing: border-box;
  overflow: hidden;
  // border: 5px solid red;
   .dv-box.inner {
   background: rgb(68, 107, 226, 0.4);
  //  padding:20px;
   font-size:20px;
   text-align: center;
  }
 }
</style>
